<template>
  <div class="svvg" id="svvg">
    <!-- 箭头 start-->
    <!-- <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        用作箭头的 marker
        <marker
          id="arrow"
          viewBox="0 0 10 10"
          refX="5"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto-start-reverse"
        >
          <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
      </defs>
      带标记的线
      <line
        x1="10"
        y1="10"
        x2="90"
        y2="90"
        stroke="black"
        marker-end="url(#arrow)"
      />
      带标记的曲线
      <path
        d="M 110 10
       C 120 20, 130 20, 140 10
       C 150 0, 160 0, 170 10
       C 180 20, 190 20, 200 10"
        stroke="black"
        fill="none"
        marker-start="url(#arrow)"
        marker-mid="url(#arrow)"
        marker-end="url(#arrow)"
      />
    </svg> -->
    <!-- 箭头 end-->

    <!-- 简易曲线start -->
    <svg width="1000" height="500" class="svg" id="mainsvg"></svg>
    <el-button @click="addOneData">add</el-button>
    <!-- 简易曲线end -->
  </div>
</template>

<script>
const d3 = require("d3");
export default {
  data: function () {
    return {
      data: [
        { name: "aaa", value: 3 },
        { name: "bbb", value: 5 },
        { name: "ccc", value: 1 },
        { name: "ddd", value: 14 },
        { name: "eee", value: 7 },
        { name: "fff", value: 6 },
      ],
      hasAxis: true,
      g: null,
    };
  },
  mounted() {
    // this.showTrend();
  },
  methods: {
    axisVisible(flag) {
      this.hasAxis = flag;
    },
    // 简易曲线start
    showTrend() {
      // 坐标轴是否可见bool
      this.axisVisible(false);

      let svvg = d3.select("#mainsvg");
      // svvg.remove()
      let width = +svvg.attr("width");
      let height = +svvg.attr("height");
      let margin = { top: 10, bottom: 50, left: 50, right: 10 };
      let innerWidth = width - margin.left - margin.right;
      let innerHeight = height - margin.top - margin.bottom;
      let data = this.data;
      // 配置x轴和y轴
      let xScale = d3
        .scaleLinear()
        .domain([0, d3.max(data, (d) => d.value)])
        .range([0, innerWidth]);
      console.log();
      let yScale = d3
        .scaleBand()
        .domain(data.map((d) => d.name))
        .range([0, innerHeight]);

      // 渲染x轴和y轴
      // const g = svvg
      this.g = svvg
        .append("g")
        .attr("id", "#Axis")
        .attr("transform", `translate(${margin.left},${margin.top})`);
      const yAyis = d3.axisLeft(yScale);
      this.g.append("g").call(yAyis);
      const xAxis = d3.axisBottom(xScale);
      this.g
        .append("g")
        .call(xAxis)
        .attr("transform", `translate(0,${innerHeight})`);

      d3.selectAll(".tick text").attr("font-size", "1em"); //设置刻度字体大小
      // d3.selectAll('.tick line').attr('strock-width','1')//设置刻度宽度
      const line = d3
        .line()
        .x((d) => xScale(d.value))
        .y((d) => yScale(d.name));
      let name = "aaa";
      let value = 0;
      let sthis = this;
      setInterval(function () {
        let path = d3.select("#path");
        path.remove();
        value++;
        if (value == 10) {
          value = 0;
        }
        if (name == "aaa") {
          name = "bbb";
        } else if (name == "bbb") {
          name = "ccc";
        } else if (name == "ccc") {
          name = "aaa";
        }
        data.unshift();
        data.push({ name: "aaa", value: value });
        sthis.g
          .append("path")
          .attr("id", "path")
          .attr("fill", "none")
          .attr("stroke", "steelblue")
          .attr("stroke-width", 1.5)
          .attr("d", line(data));
      }, 1000);
    },
    addOneData() {
      console.log(this.data);
      this.showTrend();
      d3.select("#path");
      // .attr("d", line(this.data));
    },
    // 简易曲线end





  },
};
</script>

<style>
</style>